<template>
	<view class="container content-list">
		<view class="content-wrap">
			<view class="item-box" v-for="item in listData" :key="item.id">
				<view class="left">
					<image class="img-avatar" :src="item.f_user_avatar" mode=""></image>
					<view class="info">
						<view class="name">
							{{item.f_nick_name}}
						</view>
						<view class="message">
							{{item.content}}
						</view>
						<view class="date-time">
							{{item.created_time_str}}
						</view>
					</view>
				</view>
				<view class="right">
					<u-button v-if="!item.is_each" shape="circle"
						:customStyle="{width:'176rpx',height:'64rpx',fontSize:'32rpx'}" type="primary" text="回关"
						@click="onInterest(item)"></u-button>
					<u-button v-else shape="circle" :customStyle="{width:'176rpx',height:'64rpx',fontSize:'32rpx'}"
						type="primary" text="互相关注" @click="onInterest(item)"></u-button>
				</view>

			</view>
			<cu-empty tips="暂时没有数据~" v-if="listData && listData.length == 0"></cu-empty>
			<u-loadmore v-else :status="refreshStatus" />
		</view>
		<view>
			<u-modal :show="modalShow" @confirm="onConfirm" @cancel="onCancel" cancelText="取消" :showCancelButton="true">
				<view class="slot-content">
					<view class="modal-content">
						确定{{ selItem.is_each?'不在关注':'关注' }}此人？
					</view>
				</view>
			</u-modal>
		</view>

	</view>
</template>

<script>
	import Refresh from '@/mixins/refresh'
	export default {
		mixins: [Refresh],
		components: {},
		data() {
			return {
				modalShow: false,
				listData: null,
				selItem: null
			}
		},
		onLoad() {
			this.getList(false);
		},
		methods: {
			onLikeUser() {
				if (this.selItem) {
					this.$Net.get(this.$api.user_atten + "/" + this.selItem.created_uid, {

					}, 1).then(res => {
						this.$Msg.Toast('关注成功')
						this.selItem.is_each = !this.selItem.is_each
						this.modalShow = false;
					})
				}
				// user_atten

			},
			getList(status) {
				this.$Net.get(this.$api.user_msg_list, {
					...this.searchReq,
					type: 5 //1提醒，2评论，3点赞，4收藏，5关注，6系统消息
				}, 1).then(res => {
					this.setStatus(res.count, res.list, status);
				}).catch(() => {})
			},
			onConfirm() {
				this.onLikeUser();
			},
			onCancel() {
				this.modalShow = false;
			},
			onInterest(item) {
				this.selItem = item;
				this.modalShow = true;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		// flex: 1;
		// overflow: hidden;

		.content-wrap {
			padding-top: 50rpx;
			padding-bottom: 40rpx;
			padding-bottom: calc(40rpx + constant(safe-area-inset-top));
			padding-bottom: calc(40rpx + env(safe-area-inset-top));
		}

		.item-box {
			display: flex;
			justify-content: space-between;
			margin-bottom: 50rpx;

			.left {
				display: flex;

				.img-avatar {
					width: 72rpx;
					height: 72rpx;
					margin-right: 14rpx;
					border-radius: 50%;
				}

				.name {
					color: rgba(0, 0, 0, 0.40);
					font-family: "PingFang SC";
					font-size: 28rpx;
				}

				.message {
					color: rgba(0, 0, 0, 0.80);
					font-family: "PingFang SC";
					font-size: 32rpx;
					margin-top: 6rpx;
					margin-bottom: 10rpx;
				}

				.date-time {
					color: rgba(0, 0, 0, 0.40);
					font-family: "PingFang SC";
					font-size: 28rpx;
					font-weight: 400;

				}
			}

		}

		.modal-content {
			color: #353535;
			text-align: center;
			font-family: "PingFang SC";
			font-size: 34rpx;
			font-weight: 400;
			padding: 40rpx 0;
		}

		::v-deep .u-popup__content {
			border-radius: 20px !important;
		}
	}
</style>